<template>
  <div>
    <div class="mindWidth">
      <div class="table_tab" v-show="trademarkData.length">
        <div class="table_hd">
          <div class="brand_name">商标名称</div>
          <div class="register_num">注册号</div>
          <div class="category">类别</div>
          <div class="application_date">申请日期</div>
          <div class="polling">状态</div>
          <!-- <div class="register_date">注册时间</div> -->
        </div>
        <div class="table_bd" v-for="(item, index) in trademarkData" :key="index">
          <div class="brand_name_content singlerows">{{ item.trademarkName || '--' }}</div>
          <div class="register_num_content">{{ item.registrationNumber || '--' }}</div>
          <div class="category_num_content">{{ item.categoryName || '--' }}</div>
          <div class="application_date_num_content">{{ item.applyTime || '--' }}</div>
          <div class="polling_content">{{ item.flowStatusDesc ? item.flowStatusDesc : "--" }}</div>
          <!-- <div class="register_date_content">{{ item.createTime ? item.createTime : "-" }}</div> -->
        </div>
      </div>

      <!-- 没有数据 -->
      <div class="table_bd_item" v-show="isLogin || dialogVisible || !trademarkData.length">
        <!-- 没有登录 -->
        <div class="noData" v-if="isLogin">
          <img src="../../static/image/noData.png" alt />
          您尚未登录
          <a @click="toLogin" style="font-weight: 600">立即登录</a>查看更多
        </div>
        <!-- 查询次数上限 -->
        <div class="noQueryData" v-else-if="dialogVisible">
          您的查询次数已满
          <a @click="toVIPPage">立即开通</a>会员
        </div>
        <div class="noData" v-else-if="!trademarkData.length">暂无数据</div>
      </div>
      <div class="pageList">
        <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" />
      </div>
    </div>
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
  </div>
</template>

<script>
import paging from "../../components/paging.vue";
import { commonRequest } from "../../api/api.js";
import loginDialog from "../../components/login_item/LoginDialog";
export default {
  name: "brand", // 商标区域
  components: {
    paging,
    loginDialog
  },
  data() {
    return {
      trademarkData: [],
      pages: 1,
      dialogVisible: false, // 查询次数已满弹出框
      isLogin: false, // 提示登录框
      openLoginDiaogVisible: false, // 登录框是否显示
      id: this.$route.query.id || this.$route.params.id
    };
  },
  mounted() {
    this.dataQq();
  },
  methods: {
    toLogin() {
      this.$refs.login.open();
    },
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    accept_CurrentValue: function(value) {
      this.pages = value;
      this.dataQq();
    },
    dataQq() {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.isLogin = true;
        return;
      }
      commonRequest("/api/cms/cmsTrademark/list", {
        id: this.id,
        pageNo: this.pages
      }).then(res => {
        if (res.code === 10001) {
          this.isLogin = true;
        } else if (res.code == 10005) {
          this.dialogVisible = true;
        } else {
          this.trademarkData = res.records || [];
          this.dataPages = res.pages || 1;
          this.$refs.paging_zi.totalValue(res.total);
        }
      });
    },
    // 去升级vip页
    toVIPPage() {
      window.open("/pageVIP", "_balnk");
    }
  }
};
</script>

<style lang="less" scoped>
.table_bd_item {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;

  a {
    color: #2b89f8;
  }
}

:deep(.el-dialog__footer) {
  height: 310px;
}

.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;

  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

.el-dialog__footer {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}

/* 弹框的结束 */
.table_tab {
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: #fff;

  .table_hd {
    display: flex;
    align-items: center;
    height: 50px;

    div {
      display: flex;
      align-items: center;
      height: 100%;
      padding-left: 10px;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
    }

    .brand_img {
      width: 120px;
      border-right: 1px solid #ccc;
    }

    .brand_name {
      width: 300px;
      border-right: 1px solid #ccc;
    }

    .register_num {
      width: 240px;
      border-right: 1px solid #ccc;
    }

    .category {
      width: 240px;
      border-right: 1px solid #ccc;
    }

    .application_date {
      width: 240px;
      border-right: 1px solid #ccc;
    }

    .polling {
      width: 180px;
      border-right: 1px solid #ccc;
    }

    // .register_date {
    //   width: 180px;
    // }
  }

  .table_bd {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #ccc;

    div {
      font-size: 14px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .brand_img_content {
      padding-left: 10px;
      width: 120px;
      display: flex;
      align-items: center;
      border-right: 1px solid #ccc;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .brand_name_content {
      width: 300px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .register_num_content {
      width: 240px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .category_num_content {
      width: 240px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .application_date_num_content {
      width: 240px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .polling_content {
      width: 180px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    // .register_date_content {
    //   width: 180px;
    //   border-right: none;
    //   padding-left: 10px;
    // }
  }
}

.pageList {
  height: 100px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
</style>
